<template>
    <div class="soul-white-box">
        <h3 class="soul-box-title">搜索文章</h3>
        <div class="jblog-rss-content">
            <input v-model="title" class="x-box-border" name="" placeholder="请输入关键字"/>
            <button type="submit" v-on:click="getData(title)" class="x-rss-btn soul-background-whiteblue">搜索</button>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                title:''
            }
        },
        methods:{
            getData(title){
                this.$emit('paginationSearch', title);
            }
        }
    }
</script>
<style>
    .soul-white-box{
        background:#fff;
        margin-bottom:1rem;
        margin-top:1rem;
        padding:1rem;
        border-radius:4px;
        border:1px solid #ededed;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .soul-box-title{
        font-size:1.2rem;
        padding-bottom:1rem;
        margin-bottom:1rem;
        border-bottom:1px solid #ededed;
        position:relative;
    }
    .x-box-border{
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    .jblog-rss-content{
        position: relative;
        padding-top:1rem;
        padding-bottom:1rem;
    }
    .jblog-rss-content input{
        width:100%;
        height:2rem;
        line-height:2rem;
        padding-left:5%;
        padding-right:20%;
        border:1px solid #e6e6e6;
        background-color: #f9f9f9;
    }
    .x-rss-btn{
        position: absolute;
        right:0;
        top:1rem;
        color:#fff;
        height: 2rem;
        line-height: 2rem;
        width: 4rem;
        text-align: center;
    }
    .soul-background-whiteblue{
        background-color: #19b5fe;
    }
</style>